<html lang="zh-CN">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <!-- <link rel="icon" href="<%= BASE_URL %>hlsk-small.png" id="link" type="image/x-icon"> -->
    <meta property="og:title" content="系统分享"/>
    <meta property="og:description"
          content="系统采用物联网、大数据、云计算、智能硬件等相关技术集成，具有供应链管理、数据采集、状态检测、自动预警、报表等功能"/>
    <title id="title"></title>
    <script src="./jquery.min.js"></script>
    <style>
        html,
        body,
        #app {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .main {
            width: 100%;
            height: 100%;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh1.png") no-repeat;
            background-size: 100% 100%;
            position: relative;
            min-width: 1080px;
            min-height: 672px;
        }

        #main-logo {
            width: 150px;
            height: 30px;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh2.png") no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 5%;
            left: 3%;
        }

        #main-all {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 5%;
            left: calc(3% + 180px);
            background: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh3.png') no-repeat;
            cursor: pointer;
            background-size: 100% 100%;
        }

        #main-close {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 5%;
            left: calc(3% + 180px);
            display: none;
            background: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh4.png') no-repeat;
            cursor: pointer;
            background-size: 100% 100%;
        }

        #title-body {
            width: 50%;
            height: 300px;
            position: absolute;
            top: 2%;
            left: 19%;
            font-size: 30px;
            color: #fff;
        }

        .title-body-body {
            overflow: hidden;
            width: 100%;
            margin-bottom: 10px;
            height: 40px;
            line-height: 40px;
        }

        #title-body-sender-title, #title-body-customer-title {
            width: 100px;
            font-size: 24px;
            text-align: justify;
            text-align-last: justify;
            float: left;
        }

        #carNum {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 60px;
            color: #fff;
            height: 13%;
            width: 28%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 2%;
            box-sizing: border-box;
        }

        #main-top {
            width: 70%;
            height: 13%;
            position: absolute;
            top: 17%;
            left: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #main-top-left-img {
            width: 25%;
            height: 100%;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh5.png") no-repeat;
            background-size: 100% 100%;
        }

        #main-top-right-img {
            width: 25%;
            height: 100%;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh6.png") no-repeat;
            background-size: 100% 100%;
        }

        #main-top-car {
            width: 50%;
            height: 100%;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh7.png") no-repeat;
            background-size: 100% 100%;
        }

        #main-body {
            width: 70%;
            height: 17%;
            border: 3px solid #3ad79a;
            background-color: rgba(58, 215, 154, 0.2);
            position: absolute;
            top: 30%;
            left: 15%;
            font-size: 80px;
            color: #3ad79a;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
        }

        #main-body-img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: none;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh8.png");
            background-size: 100% 100%;
        }

        #main-body-error-img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            display: none;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh9.png");
            background-size: 100% 100%;
        }

        #main-body-text {
            overflow: hidden;
            /* 第二步：让文本不会换行， 在同一行继续 */
            white-space: nowrap;
            /* 第三步：用省略号来代表未显示完的文本 */
            text-overflow: ellipsis;
            font-size: 70px;
        }

        #main-msg {
            width: 70%;
            height: 19%;
            position: absolute;
            top: 50%;
            left: 15%;
            font-size: 30px;
            color: #FFCA19;
            display: flex;
            justify-content: left;
        }

        #main-msg-img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            background: url("https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh10.png");
            display: none;
            background-size: 100% 100%;
        }

        #main-msg-text {
            width: calc(100% - 50px);
            word-wrap: break-word;
        }

        #main-weight {
            width: 70%;
            position: absolute;
            left: 15%;
            bottom: 5%;
            font-size: 170px;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: -webkit-linear-gradient(275deg, #f6d35b, #f97d33);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #num-unit {
            font-size: 100px;
            font-weight: 300;
        }
    </style>
    <script>
        $(document).ready(function () {
            document.addEventListener('webkitfullscreenchange', () => {
                const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                if (isFullScreen) {
                    $("#main-all").attr("style", "display: none");
                    $("#main-close").attr("style", "display: block");
                } else {
                    $("#main-all").attr("style", "display: block");
                    $("#main-close").attr("style", "display: none");
                }
            })
            let timerQ = null;

            function clearTimeQ() {
                try {
                    clearInterval(timerQ);
                } catch (error) {
                    timerQ = null;
                }
            }

            let hongwai1 = true;
            let hongwai2 = true;
            let msg = '';
            let imageConfig = {
                hongwai1Error:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh11.png'); background-size: 100% 100%",
                hongwai1:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh5.png'); background-size: 100% 100%",
                hongwai2Error:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh12.png'); background-size: 100% 100%",
                hongwai2:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh6.png'); background-size: 100% 100%",
                state1:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh7.png'); background-size: 100% 100%",
                state2:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh13.png'); background-size: 100% 100%",
                state3:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh14.png'); background-size: 100% 100%",
                state4:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh15.png'); background-size: 100% 100%",
                state5:
                    "background-image: url('https://hulianuat.oss-cn-beijing.aliyuncs.com/public/weigh16.png'); background-size: 100% 100%",
                state1Color:
                    "color:#3AD79A; background-color: rgba(58, 215, 154, 0.2); border: 3px solid #3AD79A; font-size: 70px",
                state2Color:
                    "color:#FBA631; background-color: rgba(251,166,49, 0.2); border: 3px solid #FBA631; font-size: 70px",
                state3Color:
                    "color:#FF562E; background-color: rgba(255,86,46, 0.2); border: 3px solid #FF562E;font-size:60px"
            };
            let state = 'ReadyState';
            getTimeOut();

            function getTimeOut() {
                clearTimeQ();
                timerQ = setInterval(() => {
                    getData();
                    getTimeOut();
                }, 300);
            }

            function getData() {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:9999/info',
                    headers: {
                        'Content-Type': 'application/json',
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Credentials": true,
                        "Access-Control-Allow-Headers": "*",
                        "Cache-Control": "no-cache, no-store, must-revalidate",
                        "Pragma": "no-cache"
                    },
                    success: function (response) {
                        let data = response;
                        $("#main-num").text(data.weight);
                        if (data.carNum) {
                            $("#carNum").text(data.carNum);
                        } else {
                            $("#carNum").text('暂无车辆');
                        }
                        if (data.active) {
                            hongwai1 = data.active[1];
                            hongwai2 = data.active[0];
                        }
                        msg = data.msg
                        state = data.state
                        let wen = data.wen
                        if (hongwai1 === false) {
                            $("#main-top-left-img").attr("style", imageConfig.hongwai1Error);
                        } else {
                            $("#main-top-left-img").attr("style", imageConfig.hongwai1);
                        }
                        if (hongwai2 === false) {
                            $("#main-top-right-img").attr("style", imageConfig.hongwai2Error);
                        } else {
                            $("#main-top-right-img").attr("style", imageConfig.hongwai2);
                        }
                        if (state === 'ReadyState') {
                            $("#main-top-car").attr("style", imageConfig.state1);
                            $("#main-body").attr("style", imageConfig.state1Color);
                            $("#main-body-img").attr("style", "display: none");
                            $("#main-body-text").text("空闲中");
                        } else if (state === 'WaitUpState') {
                            $("#main-top-car").attr("style", imageConfig.state2);
                            $("#main-body").attr("style", imageConfig.state2Color);
                            $("#main-body-img").attr("style", "display: none");
                            $("#main-body-text").text("等待上磅");
                        } else if (state === 'WeightState' && wen) {
                            $("#main-top-car").attr("style", imageConfig.state4);
                            $("#main-body").attr("style", imageConfig.state2Color);
                            $("#main-body-img").attr("style", "display: none");
                            $("#main-body-text").text("磅重稳定，正在过磅");
                        } else if (state === 'WeightState' && !wen) {
                            $("#main-top-car").attr("style", imageConfig.state4);
                            $("#main-body").attr("style", imageConfig.state2Color);
                            $("#main-body-img").attr("style", "display: none");
                            $("#main-body-text").text("等待磅重稳定");
                        } else if (state === 'WaitDownState') {
                            $("#main-top-car").attr("style", imageConfig.state4);
                            $("#main-body").attr("style", imageConfig.state1Color);
                            $("#main-body-img").attr("style", "display: block");
                            $("#main-body-text").text("过磅成功");
                        } else if (state === 'DownningState') {
                            $("#main-top-car").attr("style", imageConfig.state5);
                            $("#main-body").attr("style", imageConfig.state2Color);
                            $("#main-body-img").attr("style", "display: none");
                            $("#main-body-text").text("正在下磅");
                        }
                        if (msg) {
                            $("#main-msg").attr("style", "display: block; display: flex");
                            $("#main-msg-img").attr("style", "display: block");
                            $("#main-msg-text").text(msg);
                        } else {
                            $("#main-msg").attr("style", "display: none");
                        }
                        if (data.senderName) {
                            $("#title-body-sender-title").text('供应商：');
                            $("#senderName").text(data.senderName);
                        }
                        if (data.customerName) {
                            $("#title-body-customer-title").text('客户：');
                            $("#customerName").text(data.customerName);
                        }
                    },
                    error: function (xhr) {
                    }
                })
            }

            $("#main-all").click(function () {
                let elem = document.body;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                } else {
                    //浏览器不支持全屏API或已被禁用
                }
            })
            $("#main-close").click(function () {
                let elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                } else {
                    //浏览器不支持全屏API或已被禁用
                }
            })
        });
    </script>
</head>

<body>
<div id="app">
    <div class="main">
        <div id="main-all"></div>
        <div id="main-close"></div>
        <div id="main-logo"></div>
        <div id="title-body">
            <div class="title-body-body">
                <div id="title-body-sender-title"></div>
                <div id="senderName"></div>
            </div>
            <div class="title-body-body">
                <div id="title-body-customer-title"></div>
                <div id="customerName"></div>
            </div>
        </div>
        <div id="carNum">暂无车辆</div>
        <div id="main-top">
            <div id="main-top-left-img"></div>
            <div id="main-top-car"></div>
            <div id="main-top-right-img"></div>
        </div>
        <div id="main-body">
            <div id="main-body-img"></div>
            <div id="main-body-error-img"></div>
            <div id="main-body-text">空闲中</div>
        </div>
        <div id="main-msg">
            <div id="main-msg-img"></div>
            <div id="main-msg-text"></div>
        </div>
        <div id="main-weight">
            <span id="main-num">0.00</span><span id="num-unit">吨</span>
        </div>
    </div>
</div>
</body>

</html>
